<template>
    <header>
        <van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="$router.back()">
            <template #right>
                <router-link to="/set"><van-icon name="setting" size="18" /></router-link>
            </template>
        </van-nav-bar>


    </header>
    <main>
        <div class="title">
            <div class="left">
                <van-icon
                    name="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
                    round size="50px" />
            </div>
            <div class="right">
                <p>{{ name }}</p>
                <van-tag type="warning" style="margin-right: 8px;">铜牌会员</van-tag>
                <van-tag plain type="primary">开启小白守约特权</van-tag>


            </div>
        </div>
        <van-grid>
            <van-grid-item icon="refund-o" text="待付款" />
            <van-grid-item icon="shop-o" text="待收货" />
            <van-grid-item icon="thumb-circle-o" text="待评价" />
            <van-grid-item icon="orders-o" text="全部订单" />
        </van-grid>

        <van-cell title="地址管理" is-link />
        <van-cell title="我的收藏夹" is-link />
        <van-cell title="关于我们" is-link />
    </main>
    <div>
    </div>
</template>

<script>
export default {
    // 个人中心页
    data() {
        return {
            name: ''
        }
    },
    created() {
        // 如果设置页修改后返回，这里会重新读取
        this.name = localStorage.getItem('username') || ''
    },
}
</script>

<style lang="less" scoped>
::v-deep(.van-icon__image) {
    position: absolute;
    top: -10px;
}

.title {
    height: 80px;
    padding: 10px;
    background: linear-gradient(135deg, #FFF0F0 0%, #FFECEC 100%);

    .left {
        width: 80px;
        height: 100%;
        float: left;
    }

    p {
        margin-left: 80px;
    }
}
</style>